<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isLogin = ref(true);
const form = ref({
  username: '',
  password: '',
  confirmPassword: ''
});

// 控制表单切换
const toggleForm = () => {
  isLogin.value = !isLogin.value;
  form.value = {
    username: '',
    password: '',
    confirmPassword: ''
  };
};

const handleSubmit = () => {
  if (isLogin.value) {
    console.log('登录:', form.value);
  } else {
    console.log('注册:', form.value);
  }
};

// Matrix代码雨效果
const initMatrix = () => {
  const canvas = document.getElementById('matrix-bg');
  const ctx = canvas.getContext('2d');
  
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  
  const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
  const fontSize = 14;
  const columns = canvas.width / fontSize;
  const drops = [];
  
  for (let i = 0; i < columns; i++) {
    drops[i] = 1;
  }
  
  function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    ctx.fillStyle = '#0F0';
    ctx.font = fontSize + 'px monospace';
    
    for (let i = 0; i < drops.length; i++) {
      const text = chars[Math.floor(Math.random() * chars.length)];
      ctx.fillText(text, i * fontSize, drops[i] * fontSize);
      
      if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
        drops[i] = 0;
      }
      drops[i]++;
    }
  }
  
  let animationId;
  function animate() {
    animationId = requestAnimationFrame(animate);
    draw();
  }
  
  animate();
  
  return () => cancelAnimationFrame(animationId);
};

// 星球旋转效果
const initPlanets = () => {
  const planets = document.querySelectorAll('.planet');
  let angle = 0;
  
  function rotatePlanets() {
    planets.forEach((planet, index) => {
      const radius = 150 + index * 50;
      const speed = 0.5 - index * 0.1;
      const x = radius * Math.cos(angle * speed);
      const y = radius * Math.sin(angle * speed);
      
      planet.style.transform = `translate(${x}px, ${y}px)`;
    });
    angle += 0.01;
  }
  
  const intervalId = setInterval(rotatePlanets, 20);
  return () => clearInterval(intervalId);
};

// 添加主题选择功能
const themes = [
  { id: 'matrix', name: '黑客帝国' },
  { id: 'ai', name: '人工智能' },
  { id: 'galaxy', name: '银河星空' },
  { id: 'basic', name: '基础' }
];

const currentTheme = ref('matrix');

// 添加星空效果初始化
const initGalaxy = () => {
  const createStar = () => {
    const star = document.createElement('div');
    star.className = 'star';
    star.style.left = `${Math.random() * 100}%`;
    star.style.top = `${Math.random() * 100}%`;
    star.style.animationDuration = `${Math.random() * 3 + 1}s`;
    star.style.animationDelay = `${Math.random() * 3}s`;
    return star;
  };

  const createStars = (count) => {
    const galaxy = document.querySelector('.galaxy-background');
    if (!galaxy) return;
    
    // 清除现有的星星
    const existingStars = galaxy.querySelectorAll('.star');
    existingStars.forEach(star => star.remove());
    
    // 创建新的星星
    for (let i = 0; i < count; i++) {
      galaxy.appendChild(createStar());
    }
  };

  // 创建银河旋臂
  const createGalaxyArm = () => {
    const arm = document.createElement('div');
    arm.className = 'galaxy-arm';
    return arm;
  };

  const initGalaxyArms = () => {
    const galaxyCore = document.querySelector('.galaxy-core');
    if (!galaxyCore) return;
    
    // 创建多个旋臂
    for (let i = 0; i < 4; i++) {
      const arm = createGalaxyArm();
      arm.style.transform = `rotate(${i * 90}deg)`;
      galaxyCore.appendChild(arm);
    }
  };

  createStars(200); // 创建200颗星星
  initGalaxyArms();

  return () => {
    const galaxy = document.querySelector('.galaxy-background');
    if (galaxy) {
      galaxy.innerHTML = '';
    }
  };
};

// 添加AI主题初始化
const initAI = () => {
  const createNode = () => {
    const node = document.createElement('div');
    node.className = 'neural-node';
    node.style.left = `${Math.random() * 100}%`;
    node.style.top = `${Math.random() * 100}%`;
    return node;
  };

  const createConnection = (node1, node2) => {
    const connection = document.createElement('div');
    connection.className = 'neural-connection';
    
    // 计算两点之间的距离和角度
    const x1 = node1.offsetLeft + node1.offsetWidth / 2;
    const y1 = node1.offsetTop + node1.offsetHeight / 2;
    const x2 = node2.offsetLeft + node2.offsetWidth / 2;
    const y2 = node2.offsetTop + node2.offsetHeight / 2;
    
    const length = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
    const angle = Math.atan2(y2 - y1, x2 - x1) * 180 / Math.PI;
    
    connection.style.width = `${length}px`;
    connection.style.left = `${x1}px`;
    connection.style.top = `${y1}px`;
    connection.style.transform = `rotate(${angle}deg)`;
    
    return connection;
  };

  const aiBackground = document.querySelector('.ai-background');
  if (!aiBackground) return;

  // 创建节点
  const nodes = Array.from({ length: 20 }, () => createNode());
  nodes.forEach(node => aiBackground.appendChild(node));

  // 创建连接
  nodes.forEach((node, i) => {
    nodes.slice(i + 1).forEach(otherNode => {
      if (Math.random() < 0.3) { // 30%的概率创建连接
        aiBackground.appendChild(createConnection(node, otherNode));
      }
    });
  });

  return () => {
    if (aiBackground) {
      aiBackground.innerHTML = '';
    }
  };
};

// 修改主题切换函数
const switchTheme = (themeId) => {
  cleanupMatrix?.();
  cleanupPlanets?.();
  cleanupGalaxy?.();
  cleanupAI?.();
  
  // 添加过渡效果
  const loginBox = document.querySelector('.login-box');
  if (loginBox) {
    loginBox.style.opacity = '0';
    loginBox.style.transform = 'scale(0.95)';
  }

  setTimeout(() => {
    currentTheme.value = themeId;
    
    if (loginBox) {
      loginBox.style.opacity = '1';
      loginBox.style.transform = 'scale(1)';
    }

    switch (themeId) {
      case 'matrix':
        cleanupMatrix = initMatrix();
        break;
      case 'galaxy':
        cleanupGalaxy = initGalaxy();
        break;
      case 'ai':
        cleanupAI = initAI();
        break;
    }
  }, 300);
};

let cleanupMatrix, cleanupPlanets, cleanupGalaxy, cleanupAI;

onMounted(() => {
  switchTheme('matrix');
});

onUnmounted(() => {
  cleanupMatrix?.();
  cleanupPlanets?.();
  cleanupGalaxy?.();
  cleanupAI?.();
});
</script>

<template>
  <div class="login-page" :class="currentTheme">
    <!-- 主题切换器 -->
    <div class="theme-switcher">
      <button 
        v-for="theme in themes" 
        :key="theme.id"
        :class="{ active: currentTheme === theme.id }"
        @click="switchTheme(theme.id)"
        class="theme-button"
      >
        {{ theme.name }}
      </button>
    </div>

    <!-- Matrix背景 -->
    <canvas v-show="currentTheme === 'matrix'" id="matrix-bg"></canvas>
    
    <!-- 星球系统 -->
    <div v-show="currentTheme === 'galaxy'" class="solar-system">
      <div class="planet planet-1"></div>
      <div class="planet planet-2"></div>
      <div class="planet planet-3"></div>
      <div class="planet planet-4"></div>
    </div>

    <!-- AI主题背景 -->
    <div v-show="currentTheme === 'ai'" class="ai-background">
      <div class="circuit-pattern"></div>
      <div class="neural-nodes"></div>
    </div>
    
    <!-- 银河系背景 -->
    <div v-show="currentTheme === 'galaxy'" class="galaxy-background">
      <div class="galaxy-core">
        <!-- 银河系核心 -->
        <div class="core-glow"></div>
      </div>
      <div class="nebula"></div>
      <!-- 恒星和行星会通过JS动态添加 -->
    </div>

    <div class="login-container">
      <div class="login-box">
        <div class="cyber-header">
          <div class="title">人工智能系统</div>
          <div class="subtitle">{{ isLogin ? '系统登录' : '用户注册' }}</div>
        </div>
        
        <form @submit.prevent="handleSubmit" class="login-form">
          <div class="form-group">
            <input 
              type="text" 
              v-model="form.username" 
              placeholder="用户名"
              required
            >
          </div>
          
          <div class="form-group">
            <input 
              type="password" 
              v-model="form.password" 
              placeholder="密码"
              required
            >
          </div>

          <div class="form-group" v-if="!isLogin">
            <input 
              type="password" 
              v-model="form.confirmPassword" 
              placeholder="确认密码"
              required
            >
          </div>

          <button type="submit" class="cyber-button">
            <span class="button-content">{{ isLogin ? '登录' : '注册' }}</span>
          </button>

          <div class="switch-form">
            <span @click="toggleForm">
              {{ isLogin ? '没有账号？点击注册' : '已有账号？点击登录' }}
            </span>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000;
}

#matrix-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.solar-system {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.planet {
  position: absolute;
  border-radius: 50%;
  transform-origin: center;
}

.planet-1 {
  width: 20px;
  height: 20px;
  background: radial-gradient(#ff6b6b, #ee5253);
  box-shadow: 0 0 20px #ff6b6b;
}

.planet-2 {
  width: 30px;
  height: 30px;
  background: radial-gradient(#48dbfb, #0abde3);
  box-shadow: 0 0 25px #48dbfb;
}

.planet-3 {
  width: 25px;
  height: 25px;
  background: radial-gradient(#1dd1a1, #10ac84);
  box-shadow: 0 0 30px #1dd1a1;
}

.planet-4 {
  width: 35px;
  height: 35px;
  background: radial-gradient(#f368e0, #ff9ff3);
  box-shadow: 0 0 35px #f368e0;
}

.login-container {
  position: relative;
  z-index: 3;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 15px;
  padding: 40px;
  width: 400px;
  border: 1px solid rgba(0, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.cyber-header {
  text-align: center;
  margin-bottom: 30px;
}

.title {
  font-size: 2.5em;
  color: #00fff2;
  font-weight: bold;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
  letter-spacing: 3px;
}

.subtitle {
  color: #ffffff;
  font-size: 1.2em;
  margin-top: 10px;
}

.form-group {
  margin-bottom: 20px;
  position: relative;
}

input {
  width: 100%;
  padding: 12px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 5px;
  color: #fff;
  font-size: 16px;
  transition: all 0.3s ease;
}

input:focus {
  outline: none;
  border-color: #00fff2;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.cyber-button {
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 2px solid #00fff2;
  border-radius: 5px;
  color: #00fff2;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cyber-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(0, 255, 242, 0.4),
    transparent
  );
  transition: 0.5s;
}

.cyber-button:hover::before {
  left: 100%;
}

.cyber-button:hover {
  background: rgba(0, 255, 242, 0.1);
  box-shadow: 0 0 20px rgba(0, 255, 242, 0.5);
}

.switch-form {
  text-align: center;
  margin-top: 20px;
  color: #00fff2;
  cursor: pointer;
}

.switch-form span:hover {
  text-shadow: 0 0 10px #00fff2;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 主题切换器样式 */
.theme-switcher {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  gap: 10px;
}

.theme-button {
  padding: 8px 16px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(0, 255, 255, 0.3);
  border-radius: 20px;
  color: #00fff2;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
}

.theme-button:hover,
.theme-button.active {
  background: rgba(0, 255, 255, 0.2);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* AI主题样式 */
.ai {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}

.ai .login-box {
  border-color: rgba(64, 224, 208, 0.3);
  background: rgba(26, 26, 46, 0.9);
}

.ai .title {
  color: #40e0d0;
}

.ai .cyber-button {
  border-color: #40e0d0;
  color: #40e0d0;
}

.circuit-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(90deg, rgba(64, 224, 208, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(64, 224, 208, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: circuitMove 20s linear infinite;
}

/* Galaxy主题样式 */
.galaxy {
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
}

.galaxy .login-box {
  border-color: rgba(147, 112, 219, 0.3);
  background: rgba(10, 10, 20, 0.9);
}

.galaxy .title {
  color: #9370db;
}

.galaxy .cyber-button {
  border-color: #9370db;
  color: #9370db;
}

/* Basic主题样式 */
.basic {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.basic .login-box {
  background: white;
  border: none;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.basic .title {
  color: #333;
  text-shadow: none;
}

.basic .subtitle {
  color: #666;
}

.basic input {
  background: #f5f5f5;
  border: 1px solid #ddd;
  color: #333;
}

.basic .cyber-button {
  background: #007bff;
  border: none;
  color: white;
}

.basic .switch-form {
  color: #007bff;
}

@keyframes circuitMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

/* 神经网络节点动画 */
.neural-nodes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.neural-nodes::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(64, 224, 208, 0.5);
  box-shadow: 
    0 0 50px 25px rgba(64, 224, 208, 0.2),
    100px 100px 50px 25px rgba(64, 224, 208, 0.2),
    200px 200px 50px 25px rgba(64, 224, 208, 0.2),
    300px 300px 50px 25px rgba(64, 224, 208, 0.2);
  animation: nodeFloat 10s infinite;
}

@keyframes nodeFloat {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 100px);
  }
  50% {
    transform: translate(200px, 0);
  }
  75% {
    transform: translate(100px, -100px);
  }
}

/* 银河系主题增强样式 */
.galaxy-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse at center, 
    #1B2735 0%, 
    #090A0F 100%
  );
  overflow: hidden;
  perspective: 1000px;
}

.galaxy-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  animation: rotateGalaxy 100s linear infinite;
}

.core-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: radial-gradient(
    circle at center,
    rgba(255, 255, 255, 0.8),
    rgba(255, 200, 100, 0.6),
    rgba(255, 150, 50, 0.4),
    transparent
  );
  border-radius: 50%;
  animation: pulseCore 4s ease-in-out infinite;
}

.galaxy-arm {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.8),
    rgba(255, 200, 100, 0.6),
    rgba(255, 150, 50, 0.4),
    transparent
  );
  transform-origin: left center;
  animation: rotateArm 100s linear infinite;
}

.star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite;
}

.nebula {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 30% 40%, 
      rgba(128, 0, 128, 0.2),
      transparent 30%),
    radial-gradient(circle at 70% 60%, 
      rgba(0, 128, 128, 0.2),
      transparent 30%);
  filter: blur(30px);
  opacity: 0.5;
}

@keyframes rotateGalaxy {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotateArm {
  from {
    transform: rotate(0deg) scaleX(1);
  }
  to {
    transform: rotate(360deg) scaleX(1);
  }
}

@keyframes pulseCore {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 1;
  }
}

@keyframes twinkle {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.5);
  }
}

/* 为不同大小的星星创建变体 */
.star::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: 50%;
  filter: blur(1px);
}

.star:nth-child(3n)::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  filter: blur(2px);
}

/* 超新星效果 */
.star:nth-child(7n) {
  width: 3px;
  height: 3px;
  background: rgba(255, 200, 100, 0.9);
  box-shadow: 
    0 0 4px #fff,
    0 0 8px #fff,
    0 0 12px rgba(255, 200, 100, 0.5);
}

/* 调整银河主题下的登录框样式 */
.galaxy .login-box {
  background: rgba(10, 10, 20, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.1),
    inset 0 0 20px rgba(255, 255, 255, 0.05);
}

.galaxy .title {
  color: #fff;
  text-shadow: 
    0 0 10px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.3);
}

.galaxy .cyber-button {
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.galaxy .cyber-button:hover {
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

/* 添加主题切换过渡效果 */
.login-box {
  transition: all 0.3s ease-in-out;
}

/* AI主题动画效果 */
.neural-node {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #40e0d0;
  border-radius: 50%;
  animation: pulseNode 2s infinite;
  z-index: 1;
}

.neural-connection {
  position: absolute;
  height: 1px;
  background: linear-gradient(90deg, 
    rgba(64, 224, 208, 0.3),
    rgba(64, 224, 208, 0.1)
  );
  transform-origin: left center;
  animation: connectionPulse 2s infinite;
  z-index: 0;
}

.circuit-pattern {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

.neural-nodes {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards 0.5s;
}

@keyframes pulseNode {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(64, 224, 208, 0.5);
  }
  50% {
    transform: scale(1.5);
    box-shadow: 0 0 20px rgba(64, 224, 208, 0.8);
  }
}

@keyframes connectionPulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 银河系动画增强 */
.galaxy-background {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

.galaxy-core {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards 0.3s;
}

.star {
  opacity: 0;
  animation: fadeInTwinkle 2s forwards;
}

@keyframes fadeInTwinkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* 为星星添加随机延迟 */
.star:nth-child(3n) {
  animation-delay: 0.3s;
}

.star:nth-child(4n) {
  animation-delay: 0.6s;
}

.star:nth-child(5n) {
  animation-delay: 0.9s;
}

/* Matrix主题过渡效果 */
#matrix-bg {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

/* 主题切换按钮动画 */
.theme-button {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.theme-button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(0, 255, 255, 0.5);
  opacity: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.5s ease;
}

.theme-button:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(20);
  background: rgba(0, 255, 255, 0.1);
}

.theme-button.active::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(20);
  background: rgba(0, 255, 255, 0.2);
}

/* AI背景增强 */
.ai-background {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.ai-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, 
      rgba(64, 224, 208, 0.1) 25%, 
      transparent 25%,
      transparent 75%, 
      rgba(64, 224, 208, 0.1) 75%
    );
  background-size: 60px 60px;
  animation: moveGrid 20s linear infinite;
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes moveGrid {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}
</style> 